<template>
	<el-container>
		<el-header>
			<div class="left-panel">
				<div class="module-filter">
					<label style="margin-right: 10px;width: 100px">{{ $t('user.language') }}</label>
					<el-select v-model="params.language" :placeholder="$t('table_data.selectText')" clearable>
						<el-option v-for="item in langList" :key="item.value" :label="item.name" :value="item.value">
						</el-option>
					</el-select>
				</div>
				<div class="module-filter">
					<label style="margin-right: 10px">{{$t('movie_data.movieStatusLabel')}}</label>
					<el-select v-model="params.status" :placeholder="$t('table_data.selectText')" clearable>
						<el-option
							v-for="item in statusList"
							:key="item.value"
							:label="item.name"
							:value="item.value"
							>
						</el-option>
					</el-select>
				</div>
				<div class="module-filter">
					<label style="margin-right: 10px;width: 100px">{{ $t('artwork_data.classificationLabel') }}</label>
					<el-select v-model="params.category" :placeholder="$t('table_data.selectText')" clearable>
						<el-option v-for="item in classList" :key="item.value" :label="item.name" :value="item.value">
						</el-option>
					</el-select>
				</div>
				<!-- <div class="module-filter">
					<label style="margin-right: 10px;width: 100px">{{ $t('artwork_data.currency') }}</label>
					<el-select v-model="params.currency" :placeholder="$t('table_data.selectText')" clearable>
						<el-option v-for="item in tonghList" :key="item.value" :label="item.name" :value="item.value">
						</el-option>
					</el-select>
				</div> -->
				<!-- <div class="module-filter">
					<label style="margin-right: 10px;width: 100px">{{ $t('artwork_data.movieTitle') }}</label>
					<el-select v-model="params.movieId" filterable :filter-method="searchMovie" :placeholder="$t('artwork_data.movieplace')">
						<el-option v-for="item in movieData" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</div> -->
				<div class="module-filter">
					<label style="margin-right: 10px">{{ $t('artwork_data.startDate') }}</label>
					<el-date-picker v-model="params.startDate" type="datetime" value-format="YYYY-MM-DD HH:mm:ss"
						:placeholder="$t('artwork_data.startDateLabel')" :disabled-date="beforeOptions"></el-date-picker>
				</div>
				<div class="module-filter">
					<label style="margin-right: 10px">{{ $t('artwork_data.endDate') }}</label>
					<el-date-picker v-model="params.endDate" type="datetime" value-format="YYYY-MM-DD HH:mm:ss"
						:placeholder="$t('artwork_data.endDateLabel')" :disabled-date="backOptions"></el-date-picker>
				</div>
				<div class="module-filter btns">
					<el-button type="primary" icon="el-icon-search" @click="upsearch">{{ $t('table_data.searchText') }}</el-button>
					<el-button @click="reset">{{ $t('table_data.resetText') }}</el-button>
				</div>
			</div>
		</el-header>
		<el-main class="nopadding">
			<div class="top-panel">
				<!-- <el-button type="primary" icon="el-icon-plus" @click="add">{{ $t('table_data.addText') }}</el-button> -->
				<!-- <el-button type="danger" icon="el-icon-minus" :disabled="!selection.length" @click="table_del">{{ $t('table_data.del') }}</el-button> -->
			</div>
			<scTable ref="table" :apiObj="apiObj" row-key="id" stripe border :params="sendParams" :hideSetting="true"
				@sortChange="sortChange" :sortType="direction" width="100%" @selection-change="selectionChange">
				<!-- <el-table-column type="selection" width="50"></el-table-column> -->
				<el-table-column :label="$t('artwork_data.name')" prop="artworkName" width="auto"></el-table-column>
				<el-table-column :label="$t('artwork_data.category')" prop="category" width="auto">
					<template #default="scope">
						<el-tag v-if="scope.row.category == 11" type="info">{{ $t('artwork_data.classification.class1') }}</el-tag>
						<el-tag v-else-if="scope.row.category == 12" type="success">{{ $t('artwork_data.classification.class2') }}</el-tag>
						<el-tag v-else-if="scope.row.category == 13" type="warning">{{ $t('artwork_data.classification.class3') }}</el-tag>
						<el-tag v-else-if="scope.row.category == 14" type="info">{{ $t('artwork_data.classification.class4') }}</el-tag>
						<el-tag v-else-if="scope.row.category == 15" type="info">{{ $t('artwork_data.classification.class7') }}</el-tag>
						<el-tag v-else-if="scope.row.category == 21" type="success">{{ $t('artwork_data.classification.class5') }}</el-tag>
						<el-tag v-else type="warning">{{ $t('artwork_data.classification.class6') }}</el-tag>
					</template>
				</el-table-column>
				<el-table-column :label="$t('artwork_data.creatorName')" prop="creatorName" width="auto"></el-table-column>
				<el-table-column :label="$t('artwork_data.movieName')" prop="movieName" width="auto"></el-table-column>
				<el-table-column :label="$t('artwork_data.price')" prop="price" width="auto"></el-table-column>
				<el-table-column :label="$t('artwork_data.currency')" prop="currency" width="auto">
					<template #default="scope">
						<el-tag v-if="scope.row.currency == 2" type="warning">{{ $t('table_data.currency.dollar') }}</el-tag>
						<el-tag v-if="scope.row.currency == 3" type="warning">{{ $t('table_data.currency.rmb') }}</el-tag>
						<el-tag v-if="scope.row.currency == 1" type="warning">{{ $t('table_data.currency.jpy') }}</el-tag>
					</template>
				</el-table-column>
				<el-table-column :label="$t('artwork_data.startDate')" prop="saleStartDate" width="auto"></el-table-column>
				<el-table-column :label="$t('artwork_data.endDate')" prop="saleEndDate" width="auto"></el-table-column>
				<!-- <el-table-column :label="$t('artwork_data.endDate')" prop="profession" width="auto"></el-table-column> -->
				<el-table-column :label="$t('artwork_data.status')" prop="status" width="auto">
					<template #default="scope">
						<el-tag v-if="scope.row.status == 0" type="info">{{ $t('artwork_data.statusType.status6') }}</el-tag>
						<el-tag v-if="scope.row.status == 1" type="success">{{ $t('artwork_data.statusType.status7') }}</el-tag>
						<el-tag v-if="scope.row.status == 2" type="info">{{ $t('artwork_data.statusType.status8') }}</el-tag>
						<el-tag v-if="scope.row.status == 3" type="danger">{{ $t('artwork_data.statusType.status5') }}</el-tag>
						<el-tag v-if="scope.row.status == 4" type="info">{{ $t('artwork_data.statusType.status9') }}</el-tag>
					</template>
				</el-table-column>
				<el-table-column :label="$t('table_data.createAt')" prop="createAt" width="auto" sortable></el-table-column>
				<el-table-column :label="$t('table_data.operate')" width="200">
					<template #default="scope">
						<el-button-group>
							<el-button text type="primary" size="small" @click="table_detail(scope.row, scope.$index)">{{ $t('table_data.detail') }}</el-button>
							<el-button text type="primary" size="small" v-if="scope.row.status==1||scope.row.status==2" @click="offShelves(scope.row, scope.$index,3)">{{ $t('table_data.discontinue') }}</el-button>
							<el-button text type="danger" size="small" v-if="scope.row.status==1" @click="offShelves(scope.row, scope.$index,2)">{{ $t('table_data.offShelf') }}</el-button>
							<el-button text type="danger" size="small" v-if="scope.row.status==2" @click="offShelves(scope.row, scope.$index,1)">{{ $t('table_data.resell') }}</el-button>
							<!-- <el-popconfirm :title="$t('table_data.del_text')" @confirm="table_del(scope.row, scope.$index)">
								<template #reference>
									<el-button text type="primary" size="small">{{ $t('table_data.del') }}</el-button>
								</template>
							</el-popconfirm> -->
						</el-button-group>
					</template>
				</el-table-column>
			</scTable>
		</el-main>
	</el-container>
	<save-dialog v-if="dialog.save" ref="saveDialog" @success="handleSuccess" @closed="dialog.save = false"></save-dialog>
</template>

<script>
import saveDialog from './client/save'

export default {
	name: "client",
	components: {
		saveDialog
	},
	data() {
		return {
			direction: 'direction',
			langList: [
				{
					name: '简体中文',
					value: 'zh_CN',
				},
				{
					name: '繁體中文',
					value: 'zh_TW',
				},
				{
					name: 'English',
					value: 'en_US',
				},
				{
					name: '日本語',
					value: 'ja_JP',
				}
			],
			statusList: [
				{
					name: this.$t('artwork_data.statusType.status6'),
					value: 0,
				},
				{
					name: this.$t('artwork_data.statusType.status7'),
					value: 1,
				},
				{
					name: this.$t('artwork_data.statusType.status8'),
					value: 2,
				},
				{
					name: this.$t('artwork_data.statusType.status5'),
					value: 3,
				},
				{
					name: this.$t('artwork_data.statusType.status9'),
					value: 4,
				}
			],
			classList: [
				{
					name: this.$t('artwork_data.classification.class1'),
					value: 11,
				},
				{
					name: this.$t('artwork_data.classification.class2'),
					value: 12,
				},
				{
					name: this.$t('artwork_data.classification.class3'),
					value: 13,
				},
				{
					name: this.$t('artwork_data.classification.class4'),
					value: 14,
				},
				{
					name: this.$t('artwork_data.classification.class5'),
					value: 21,
				},
				{
					name: this.$t('artwork_data.classification.class7'),
					value: 15,
				},
				{
					name: this.$t('artwork_data.classification.class6'),
					value: 29,
				}
			],
			tonghList: [
				{
					name: this.$t('table_data.currency.dollar'),
					value: 2,
				},
				{
					name: this.$t('table_data.currency.rmb'),
					value: 3,
				},
				{
					name: this.$t('table_data.currency.jpy'),
					value: 1,
				}
			],
			movieData: [

			],
			theatreData: [

			],
			dialog: {
				save: false
			},
			search: {
				keyword: ""
			},
			apiObj: {},
			selection: [],
			searchKey: null,
			params: {
				currency: null,
				movieId: null,
				category: null,
				startDate: null,
				endDate: null,
				language: null,
				status: null
			},
			sendParams: {

			}
		}
	},
	async created() {
		this.apiObj = this.$API.cinema_artwork.getArtWork;
		
	},
	methods: {
		offShelves(row,index,status){
			console.log(index)
			this.$confirm(status==2?this.$t('table_data.deltips5'):status==3?this.$t('table_data.deltips3'):this.$t('table_data.deltips4'), this.$t('table_data.tips'), {
				confirmButtonText: this.$t('table_data.editText'),
				cancelButtonText: this.$t('table_data.cancelText'),
				type: 'warning'
			}).then(async () => {
				let data = {
					"artworkId": row.artworkId,
					"status": status
				}
				var res = await this.$API.cinema_artwork.setCinemaArtworkStatus.post(data);
        if(res.code == 'OK'){
					//这里选择刷新整个表格 OR 插入/编辑现有表格数据
					this.$refs.table.upData(this.params);
					this.$message.success(status==2?this.$t('table_data.pauseSuccessRes'):status==3?this.$t('table_data.offselfSuccessRes'):this.$t('table_data.sellSuccessRes'))//this.$t('table_data.delsucc')
				}else{
					this.$alert(res.message, this.$t('table_data.tips'), {type: 'error'})
				}
			}).catch(() => {
				this.$message({
					type: 'info',
					message: 'cancel'
				});          
			});
		},
		closeTag(){
			const tagList = this.$store.state.viewTags.viewTags;
			const tag = this.$route;
			const nowTagIndex = tagList.findIndex(item => item.fullPath == tag.fullPath)
			this.$store.commit("removeViewTags", tag)
			this.$store.commit("removeIframeList", tag)
			this.$store.commit("removeKeepLive", tag.name)

			const leftView = tagList[nowTagIndex - 1]
			if (leftView) {
				this.$router.push(leftView)
			} else {
				this.$router.push('/')
			}
		},
		searchMovie(value){
			console.log('监听输入',value)
			if(value&&!/^\s/g.test(value)){
				setTimeout(async () => {
						let params = {
							pageNum: 1,
							pageSize: 6,
							keyword: value
						}
						const res = await this.$API.artwork.getMovie.get(params);
						if(res.data.list.length){
							this.movieData = res.data.list.map(n=>({
								label: n.title,
								value: n.id
							}));
						}
				}, 1000)
			}
		},
		reset() {
			this.params.currency = null
			this.params.movieId = null
			this.params.category = null
			this.params.startDate = null
			this.params.endDate = null
			this.params.language = null
			this.params.status = null
			this.$refs.table.upData(this.params);
		},
		upsearch() {
			Object.assign(this.sendParams,this.params);
			// if(this.sendParams.startDate)this.sendParams.startDate = this.$TOOL.getLocalTime(9,this.params.startDate,true)//this.$TOOL.dateFormat(this.sendParams.startDate);
			// if(this.sendParams.endDate)this.sendParams.endDate = this.$TOOL.getLocalTime(9,this.params.endDate,true)//this.$TOOL.dateFormat(this.sendParams.endDate);
			this.$refs.table.upData(this.sendParams);
		},
		//增加
		add() {
			this.$router.push({path:'/artWorkTable/client/save',query:{type:'add','id':'add'}})
			// this.dialog.save = true
			// this.$nextTick(() => {
			// 	this.$refs.saveDialog.open()
			// })
		},
		//编辑
		table_edit(row){
			this.$router.push({path:'/artWorkTable/client/save',query:{type:'add','id':row.artworkId}})
			// this.dialog.save = true
			// this.$nextTick(() => {
			// 	this.$refs.saveDialog.open('edit').setData(row)
			// })
		},
		// 详情
		table_detail(row){
			this.$router.push({path:'/artWorkTable/client/save',query:{type:'detail','id':row.artworkId}})
			// this.dialog.save = true
			// this.$nextTick(() => {
			// 	this.$refs.saveDialog.open('edit').setData(row)
			// })
		},
		//删除
		async table_del(row, index){
				console.log(index)
			this.$confirm(this.$t('table_data.deltips1'), this.$t('table_data.tips'), {
				confirmButtonText: this.$t('table_data.editText'),
				cancelButtonText: this.$t('table_data.cancelText'),
				type: 'warning'
			}).then(async () => {
				var res = await this.$API.creator_artwork.delMovie.delete(row.artworkId);
        if(res.code == 'OK'){
					//这里选择刷新整个表格 OR 插入/编辑现有表格数据
					this.$refs.table.upData(this.params);
					this.$message.success(this.$t('table_data.delsucc'))
				}else{
					this.$alert(res.message, this.$t('table_data.tips'), {type: 'error'})
				}
			}).catch(() => {
				this.$message({
					type: 'info',
					message: 'cancel'
				});          
			});
		},
		//批量删除
		async batch_del() {
			this.$confirm(`${this.$t('table_data.deltips1')} ${this.selection.length} ${this.$t('table_data.deltips2')}`, this.$t('table_data.tips'), {
				type: 'warning'
			}).then(() => {
				const loading = this.$loading();
				this.selection.forEach(item => {
					this.$refs.table.tableData.forEach((itemI, indexI) => {
						if (item.id === itemI.id) {
							this.$refs.table.tableData.splice(indexI, 1)
						}
					})
				})
				loading.close();
				this.$message.success(this.$t('table_data.operasucc'))
			}).catch(() => {

			})
		},
		selectionChange(selection){
			console.log(1111111,selection)
			this.selection = selection;
		},
		//本地更新数据
		handleSuccess(data, mode) {
			if (mode == 'add') {
				data.id = new Date().getTime()
				this.$refs.table.tableData.unshift(data)
			} else if (mode == 'edit') {
				this.$refs.table.tableData.filter(item => item.id === data.id).forEach(item => {
					Object.assign(item, data)
				})
			}
		},
		beforeOptions(v){
			if(!this.params.endDate)return false
			return v.getTime() > new Date(this.params.endDate).getTime();//  - 86400000是否包括当天
		},
		backOptions(v){
			return v.getTime() < new Date(this.params.startDate).getTime();//  - 86400000是否包括当天
		},
	}
}
</script>

<style scoped>
.module-filter {
	margin-right: 10px;
}

.el-header {
	--el-header-height: auto;
}

.left-panel {
	flex-wrap: wrap;
	line-height: 50px;
}

.top-panel {
	margin: 10px;
}

.scTable {
	height: calc(100% - 60px) !important;
}

.el-main.nopadding {
	margin: 0 10px;
}

.el-header {
	margin: 10px;
	border-radius: 4px;
}

@media only screen and (max-width: 820px) and (min-width: 768px) {
	.module-filter {
    flex: 0 0 30%;
    display: flex;
    flex-direction: column;
    margin: 0 10px;
	}
	.btns {
    margin: 10px;
    width: 340px;
    flex-direction: row;
	}
}
</style>
